<template>
    <div class="all">
        <div class="top">
            <div class="biaoti">全省农村集体资产清算核资报送系统和组织登记赋码管理<br/>系统软件操作培训班</div>
        </div>
            <div class="center">
                <div v-show="query">
                    <el-button @click="sign" type="primary" style="width: 200px;height: 60px;font-size: 25px">开始签到</el-button>
                </div>
                <div  v-show="!query">
                    <div style="font-size: 26px;color: red">{{message}}</div>
                    <br/>
                    <br/>
                    <p>您的签到信息如下：</p>
                    <p>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：&nbsp;&nbsp;&nbsp;{{name}}</p>
                    <p>单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位:&nbsp;&nbsp;&nbsp;{{company}}</p>
                    <p>会议名称: &nbsp;&nbsp;&nbsp;{{type}}</p>
                    <p>签到时间:&nbsp;&nbsp;&nbsp;{{time}}</p>
                </div>
            </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                query:true,
                message:'',
                name:'',
                company:'',
                type:'',
                time:''
            }
        },
        created(){
            this.getInformation()
        },
        methods: {
            getInformation(){
                this.$axios.get('/wechat/achievement/queryregisterapi'
                ).then((res)=>{
                    if(res.data.code==201){
                        this.query=true;
                    }
                    else if(res.data.code==200){
                        this.query=false;
                        this.message=res.data.msg;
                        this.name=res.data.data.truename;
                        this.company=res.data.data.company;
                        this.type=res.data.data.type;
                        this.time=res.data.data.time;
                    }
                })
            },
            sign(){
                this.$axios.post('/wechat/achievement/registerapi'
                ).then((res)=>{
                    if(res.data.code==200)
                    {
                        this.query=false;
                        this.message=res.data.msg;
                        this.name=res.data.data.truename;
                        this.company=res.data.data.company;
                        this.type=res.data.data.type;
                        this.time=res.data.data.time;
                    }
                    else{
                        this.$message.error(res.data.msg);
                    }
                })
            },

        }
    }
</script>

<style scoped>
    @media (max-width: 700px){
        .all{
            text-align: center;
            margin: 0;
            padding: 0px;
        }
        .top{
            width: 100%;

            height: 50px;
            background: linear-gradient(to right,#0f2027,#203a43,#2c5364);
            margin-bottom: 40px
        }
        .biaoti{
            font-size: 18px;
            color: white;
            margin-left: 10px;
        }
        .center{
            width: 80%;
            text-align: center;
            margin: 0 auto;
            margin-top: 20px
        }
        table{
            width: 80%;
            text-align: center;
            padding:10px;
            /*border: 1px solid #5e7382;*/
            margin: 0 auto;
            /*border-radius: 5px;*/
        }
        td{
            border: 1px solid #5e7382;
            width: 200px;
            height: 40px;
            border-radius: 5px;
        }
        th{
            border: 1px solid #5e7382;
            width: 200px;
            height: 40px;
            border-radius: 5px;
        }
        p{
            text-align: left;
            margin-left: 25%;
            line-height: 1.5;
            font-size: 18px;
        }
    }
    @media (min-width: 700px){
        .all{
            text-align: center;
            margin: 0;
            padding: 0px;
        }
        .top{
            margin: 0 auto;
            width: 70%;
            height: 100px;
            border-bottom: 2px solid #5e7382;

        }
        .center{
            width: 500px;
            text-align: center;
            margin: 0 auto;
            margin-top: 30px
        }
        .biaoti{
            font-size: 24px;
            text-align: center;

        }
        p{
            text-align: left;
            margin-left: 25%;
            line-height: 1.5;
            font-size: 18px;
        }
        table{
            width: 500px;
            text-align: center;
            padding:10px;
            /*border: 1px solid #5e7382;*/
            margin: 0 auto;
            /*border-radius: 5px;*/
            margin-top: 30px
        }
        td{
            border: 1px solid #5e7382;
            width: 200px;
            height: 40px;
            border-radius: 5px;
        }
        th{
            border: 1px solid #5e7382;
            width: 200px;
            height: 40px;
            border-radius: 5px;
        }
    }
</style>
